<template>
  <div class="digitalfarm">
    <el-row>
      <el-col :span="24">
        农场面积：
        地块数量：
        种植作物：
        <div style="float:right;user-select:none;cursor: pointer;"
        @click="foreCastDrawerState = true;">返回</div>
      </el-col>
    </el-row>
    <div class="map" ref="mapNode"></div>
    <div class="draw-land" @click="drawPolygon" v-show="foreCastDrawerState">
      <p>画地块</p>
      <p>
        <i class="el-icon-edit"></i>
      </p>
    </div>
    <transition name="next-step" appear>
    <div class="next-step" v-show="!foreCastDrawerState">
      <div style="text-align:center;flex: 1">选定地块面积：{{selectedLandArea}}亩</div>
      <el-button size="mini" type="primary" @click="$emit('toggleChange')">下一步</el-button>
    </div>
    </transition>
    <transition name="sider-right" appear>
      <sider-drawer v-show="foreCastDrawerState"></sider-drawer>
    </transition>
  </div>
</template>

<script>
import siderDrawer from "./siderDrawer";
export default {
  components: {
    siderDrawer
  },
  
  data() {
    return {
      foreCastDrawerState: true,
      mouseTool: null,
      selectedLandArea: 0,
    };
  },
  mounted() {
    let AMap = window.AMap;
    let map = new AMap.Map(this.$refs.mapNode, {
      center: [116.733251, 39.964194],
      zoom: 18
    });
    let mouseTool = new AMap.MouseTool(map);
    this.mouseTool = mouseTool;

    mouseTool.on("draw", e => {
      console.log(e.obj.getPath());
    });

    var satatileLayer = new AMap.TileLayer.Satellite();
    map.add(satatileLayer);
  },
  methods: {
    drawPolygon() {
      this.showNext = true;
      this.foreCastDrawerState = false;
      this.mouseTool.polygon({
        fillColor: "#00b0ff",
        strokeColor: "#80d8ff"
      });
    }
  }
};
</script>

<style>
.digitalfarm {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.map {
  flex: 1;
}
.draw-land {
  position: absolute;
  left: 20px;
  top: 50px;
  width: 60px;
  height: 60px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 30px;
  color: aqua;
  cursor: pointer;
  background: #2b4352;
}
.next-step {
  position: absolute;
  display: flex;
  height: 50px;
  border-radius: 5px;
  width: 40%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  bottom: 20px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  line-height: 30px;
  padding: 10px;
}
.sider-right-enter{
  transform: translate3d(100%,0,0)
}
.sider-right-enter-to{
  transform: translate3d(0,0,0)
}
.sider-right-leave{
  transform: translate3d(0,0,0)
}
.sider-right-leave-to{
  transform: translate3d(100%,0,0)
}
.sider-right-enter-active,.sider-right-leave-active{
  transition: transform ease-in-out .5s;
}
.next-step-enter{
  opacity: 0;
}
.next-step-enter-to{
  opacity: 1;
}
.next-step-enter-active{
  transition: opacity ease-in-out .5s;
}
</style>